import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Icon, Row, Col, Layout, Slider } from 'antd'
import { setMusicListAsync, setPlaying, setCurrentMusic ,setLyricListAsync} from '../../redux/actions'
import { musicDurationFilter } from '../../Utils/musicFilter'
import {
  SEQUENTIAL_PLAY,
  RANDOM_PLAY,
  LOOP_PALY,
} from '../../redux/action-types'

import './right_bottom.css'
const { Footer } = Layout;
class RightBottom extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isPlaying: false,
      preMusic: 0,
      MusicNum: 0 ,  //歌曲的数目
      showSlider:false,
      volume:2
    }
  }




  //切换歌曲  mode播放的模式，type ：0为上一首 1：为下一首
  changeMusic = (mode, type) => {
    var index
    switch (mode) {
      case RANDOM_PLAY:
        var preMusic = this.props.currentMusic
         index = type ? Math.floor(Math.random() * (this.props.musicList.length + 1)) : this.state.preMusic
        this.setState({
          preMusic
        })
        this.props.setCurrentMusic(index)
        break;
      case SEQUENTIAL_PLAY:
       index =  this.props.currentMusic
      this.props.setCurrentMusic(index)
      break;
      default:
        var preMusic = this.props.currentMusic
         index = type ? this.props.currentMusic+1 : this.state.preMusic
        if(index>this.props.musicList.length-1){
          index=0
        }
        this.setState({
          preMusic
        })
        this.props.setCurrentMusic(index)
        break;
    }
    var item = this.props.musicList[index]
    console.log(index)
    this.props.setLyricListAsync(item)
  }

  back = () => {
    this.changeMusic(this.props.palyMode, 0)
  }

  forward = () => {
    this.changeMusic(this.props.palyMode, 1)
  }

  play = () => {
    var Playing = this.props.Playing
    this.props.setPlaying(!Playing)
    var audio = this.props.audio
    if (!Playing) {
      audio.play()
    } else {
      audio.pause()
    }
  }

  componentDidMount(){
    setTimeout(()=>{
       this.props.audio.addEventListener("ended",this.forward)
    },10)
  }

  componentWillReceiveProps() {
    var MusicNum = this.props.musicList.length
    this.setState({
      MusicNum
    })
  }

  showSlider=()=>{
    var showSlider = !this.state.showSlider
    this.setState({
      showSlider
    })
  }
  changeVolume = (value)=>{
    var volume = value
    this.setState({
      volume
    })
    this.props.audio.volume = volume*0.01
  }


  

  render() {
    return (
      <Footer>
        <Row className={"right-bottom"}>
          <Col span={6}><Icon type="step-backward" onClick={this.back} /></Col>
          <Col span={6}><Icon type={this.props.Playing ? 'pause' : 'right-circle'} onClick={this.play} /></Col>
          <Col span={6}><Icon type="step-forward" onClick={this.forward} /></Col>
          <Col  span={6} >
          <Row >
          <Col span={18}>
            <Icon type="sound" onClick={this.showSlider}   />
            </Col>
            <Col span={6}>
            <div style={{ height: 70,visibility:this.state.showSlider?'visible':'hidden'}} ><Slider  vertical  defaultValue={4}   value={this.state.volume}  className="volume" onChange={this.changeVolume} /></div>
            </Col>
          </Row>
          </Col>
          
        </Row>
      </Footer>
    )
  }

}
const stateMap = state => {
  return {
    musicList: state.musicList,
    Playing: state.Playing,
    audio: state.audio,
    palyMode: state.palyMode,
    currentMusic: state.currentMusic
  }
}
const actionsMap = dispatch => {
  return {
    setMusicListAsync: () => {
      dispatch(setMusicListAsync())
    },
    setPlaying: (playing) => {
      dispatch(setPlaying(playing))
    }, setCurrentMusic: (index) => {
      dispatch(setCurrentMusic(index))
    },setLyricListAsync: (musicName) => {
      dispatch(setLyricListAsync(musicName))
    },
  }
}


export default connect(stateMap, actionsMap)(RightBottom);